<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            background-color: pink;
            width: 60%;
            height: 300px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <!-- =======UI设计阶段====== -->
    <div id="box">
        <!-- 1.文件选择按钮 -->
        <input type="file" id="file1">
        <br>
        <!-- 2.上传文件按钮 -->
        <button id="btnUpload">上传文件</button>
        <br>
        <!-- 3.用于显示上传成功后的图片 -->
        <img src="" alt="" id="img" width="800">
        <br>
    </div>

    <!-- ======验证是否选择了文件====== -->
    <script>
        // 1.获取文件上传按钮
        var btnUpload = document.getElementById('btnUpload')
        // 2.为按钮绑定单机事件处理函数
        btnUpload.addEventListener('click', () => {
            // 3.获取到用户选择的文件列表
            var files = document.querySelector("#file1").files
            if (files.length <= 0) return alert(`请选择待上传文件!`)
            console.log('用户选择了待上传的文件');

            // ======向FormData中追加文件======
            // 1.创建FormData对象
            var fd = new FormData()
            // 2.追加提交的文件
            fd.append('avatar',files[0])
            
            // ======使用xhr发起上传文件的请求======
            // 1.创建xhr对象
            var xhr = new XMLHttpRequest()
            // ======监听文件上传进度======
            xhr.upload.onprogress = (e)=>{
                if(e.lengthComputable) {
                    var procentComplete = Math.ceil((e.loaded / e.total)*100)
                    console.log(procentComplete);
                }
            }
            // 2.调用open函数指定请求方式和URL地址
            xhr.open('POST','http://www.liulongbin.top:3306/api/upload/avatar')
            // 3.发起请求
            xhr.send(fd)

            // ======监听onreadystatechange事件======
            xhr.onreadystatechange = ()=>{
                if(xhr.readyState === 4 && xhr.status === 200){
                    var data = JSON.parse(xhr.responseText)
                    if (data.status === 200) {
                        document.querySelector('#img').src = 'http://www.liulongbin.top:3006'+data.url
                    }else{
                        console.log(data.message);
                    }
                }
            }

            // ======显示文件的上传进度======

        })

    </script>
</body>

</html>